<template>
  <div>
    <div
      style="
        width: 95%;
        margin: 0 auto;
        height: 50px;
        line-height: 50px;
        font-size: 20px;
      "
    >
      {{ bannerTitle }}
    </div>
    <!-- <el-button type="success" >添加订单</el-button> -->
    <Card style="position: relative">
      <div class="search_box">
        <div class="conner" style="margin-left: 0">
          收货人：
          <div class="inpu_box">
            <el-input v-model="consignee" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="conner">
          手机号：
          <div class="inpu_box">
            <el-input v-model="phone" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="conner">
          订单编号：
          <div class="inpu_box">
            <el-input v-model="ordernum" placeholder="请输入内容"></el-input>
          </div>
        </div>
        <div class="conner as">
          订单状态：
          <div class="inpu_box">
            <!-- <el-input v-model="status" placeholder="请输入内容"></el-input> -->
            <el-select v-model="status" placeholder="请选择">
              <el-option
                v-for="item in statusTime"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                @change="payChange"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="conner">
          支付状态：
          <div class="inpu_box">
            <!-- <el-input v-model="pay" placeholder="请输入内容"></el-input> -->
            <el-select v-model="pay" placeholder="请选择">
              <el-option
                v-for="item in palyTime"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                @change="statusChange"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="conner">
          宝宝年龄:
          <div class="inpu_box">
            <!-- <el-input v-model="pay" placeholder="请输入内容"></el-input> -->
            <el-select v-model="age" placeholder="请选择">
              <el-option
                v-for="item in ageTime"
                :key="item.value"
                :label="item.label"
                :value="item.value"
                @change="statusChange"
              >
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="conner picker">
          下单时间
          <div class="inpu_box">
            <!-- <el-input v-model="ordernum" placeholder="请输入内容"></el-input> -->
            <div style="display: inline-block">
              <el-date-picker
                v-model="starttime"
                type="datetime"
                placeholder="选择日期时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </div>
            至
            <div style="display: inline-block">
              <el-date-picker
                v-model="endtime"
                type="datetime"
                placeholder="选择日期时间"
                format="yyyy-MM-dd HH:mm:ss"
                value-format="yyyy-MM-dd HH:mm:ss"
              >
              </el-date-picker>
            </div>
          </div>
        </div>
        <div class="Mybutton">
          <ButtonCn
            text="查询"
            @myclick="query"
            style="display: inline-block; margin-right: 20px"
          ></ButtonCn>
          <ButtonCn
            text="重置"
            @myclick="chongzhi"
            style="display: inline-block"
          ></ButtonCn>
        </div>
      </div>
    </Card>

    <div class="itemList">
      <span>订单列表</span>
      <div style="float: right; margin-left: 10px">
        <!-- <button-cn text="添加订单" iconShow @myclick="pushOrder"></button-cn> -->
      </div>
      <div style="float: right">
        <!-- <button-cn text="新增文章" iconShow></button-cn> -->
      </div>
    </div>
    <Card>
      <el-table :data="getorderlist" style="width: 100%" height="550">
        <!-- <el-table-column type="selection" width="100"> </el-table-column> -->
        <!-- <el-table-column prop="orderId" label="表id" align="center">
        </el-table-column> -->
        <el-table-column label="产品来源" align="center">
          <template slot-scope="scope">
            <div
              style="
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                width: 100%;
              "
            >
              {{ scope.row.source }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="orderProdutName" label="产品名称" align="center">
          <!-- <template slot-scope="scope">
            <div
              style="
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.orderProdutName }}
            </div>
          </template> -->
        </el-table-column>
        <el-table-column
          prop="orderProdutPrice"
          label="产品单价"
          align="center"
        >
        </el-table-column>
        <el-table-column label="订单编号" align="center" prop="orderNumber">
          <!-- <template slot-scope="scope">
              <div
                style="
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  width: 100%;
                "
              >
                {{ scope.row.orderNumber }}
              </div>
            </template> -->
        </el-table-column>
        <el-table-column prop="orderAddressee" label="收货人" align="center">
        </el-table-column>
        <el-table-column prop="age" label="宝宝年龄" align="center">
        </el-table-column>

        <el-table-column label="下单时间" align="center" prop="orderInputTime">
          <!-- <template slot-scope="scope">
              <div
                style="
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  width: 100%;
                "
              >
                {{ scope.row.orderInputTime }}
              </div>
            </template> -->
        </el-table-column>
        <el-table-column label="电话" align="center" prop="orderAddressMobile">
          <!-- <template slot-scope="scope">
              <div
                style="
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                  width: 100%;
                "
              >
                {{ scope.row.orderAddressMobile }}
              </div>
            </template> -->
        </el-table-column>
        <el-table-column label="地址" align="center">
          <template slot-scope="scope">
            <div
              style="
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.orderAddress }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="物流单号" align="center">
          <template slot-scope="scope">
            <div
              style="
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.orderLogisticsNo }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="物流公司" align="center">
          <template slot-scope="scope">
            <div
              style="
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.orderLOgistcsType }}
            </div>
          </template>
        </el-table-column>
        <el-table-column label="订单状态" align="center">
          <template slot-scope="scope">
            <div>
              {{ myfilter(scope.row.orderStatus) }}
            </div>
          </template>
        </el-table-column>
        <!-- <el-table-column
          prop="orderLOgistcsType"
          label="物流公司"
          align="center"
        >
        </el-table-column> -->
        <el-table-column label="订单备注" align="center">
          <template slot-scope="scope">
            <div
              style="
                width: 100%;
                white-space: nowrap;
                overflow: hidden;
                text-overflow: ellipsis;
              "
            >
              {{ scope.row.orderTbRemarks }}
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="payType" label="支付方式" align="center">
        </el-table-column>
        <el-table-column prop="orderSheng" label="收件省" align="center">
        </el-table-column>
        <el-table-column prop="orderShi" label="收件市" align="center">
        </el-table-column>
        <el-table-column prop="orderQu" label="收件区" align="center">
        </el-table-column>
        <el-table-column prop="orderLOgistcsType" label="操作" align="center">
          <template slot-scope="scope">
            <!-- <button-cn
              text="查看详情"
              @myclick="details(scope.row.orderId)"
            ></button-cn> -->
            <span @click="details(scope.row.orderId)" class="edit">编辑</span>
          </template>
        </el-table-column>
      </el-table>
    </Card>

    <!-- 底部页码选择器 -->
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="page"
      :page-sizes="[10, 20, 30, 50]"
      :page-size="count"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total"
    >
    </el-pagination>

    <!-- excel -->
    <!-- <download-excel class="export-excel-wrapper" :data="DetailsForm" :fields="json_fields" :header="title"
      name="需要导出的表格名字.xls">
     
    </download-excel> -->

    <!--/ excel -->

    <!-- 详情 -->
    <AlertCn
      :alertShow="isShowdetails"
      title="详情"
      rightText="修改"
      leftText="取消"
      @confirm="editSubmint"
      @cancel="isShowdetails = false"
      @clone="isShowdetails = false"
    >
      <el-form :model="userdetails" label-width="80px">
        <!-- <el-form-item label="表id">
          <span>{{ userdetails.orderId }}</span>
        </el-form-item> -->
        <el-form-item label="产品名称">
          <span>{{ userdetails.orderProdutName }}</span>
        </el-form-item>
        <el-form-item label="单价">
          <span>{{ userdetails.orderProdutPrice }}</span>
        </el-form-item>
        <el-form-item label="订单编号">
          <!-- <span>{{ userdetails.orderNumber }}</span> -->
          <el-input v-model="userdetails.orderNumber"></el-input>
        </el-form-item>
        <el-form-item label="省市区">
          <span>{{
            userdetails.orderSheng - userdetails.orderShi - userdetails.orderQu
          }}</span>
        </el-form-item>
        <el-form-item label="收货人">
          <span>{{ userdetails.orderAddressee }}</span>
        </el-form-item>
        <el-form-item label="收货人电话">
          <span>{{ userdetails.orderAddressMobile }}</span>
        </el-form-item>
        <el-form-item label="地址">
          <span>{{ userdetails.orderAddress }}</span>
        </el-form-item>
        <el-form-item label="物流单号">
          <!-- <span>{{ userdetails.orderLogisticsNo }}</span> -->
          <el-input v-model="userdetails.orderLogisticsNo"></el-input>
        </el-form-item>
        <el-form-item label="物流公司">
          <!-- <span>{{ userdetails.orderLOgistcsType }}</span> -->
          <el-input v-model="userdetails.orderLOgistcsType"></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <!-- <span>{{ userdetails.orderStatus }}</span> -->
          <el-select
            v-model="userdetails.orderStatus"
            placeholder="请选择"
            @change="optionsChange"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="支付方式">
          <span>{{ userdetails.payType }}</span>
        </el-form-item>
        <el-form-item label="下单时间">
          <span>{{ userdetails.orderInputTime }}</span>
        </el-form-item>
        <el-form-item label="收货详细地址">
          <span>{{ userdetails.shippingaddress }}</span>
        </el-form-item>
        <el-form-item label="商品图片">
          <img :src="$imgurl + userdetails.product_img" alt="" />
        </el-form-item>
      </el-form>
    </AlertCn>
  </div>
</template>

<script>
import { getorderlist, orderdetailsFun, modifyorderFun } from "@/request/index";
import Card from "@/components/from/card.vue";
import ButtonCn from "@/components/from/button-cn.vue";
import AlertCn from "@/components/from/alert-cn.vue";
export default {
  data() {
    return {
      palyTime: [
        {
          value: 0,
          label: "未支付",
        },
        {
          value: 1,
          label: "成功",
        },
        {
          value: 2,
          label: "失败",
        },
      ],
      statusTime: [
        {
          value: 0,
          label: "待发货",
        },
        {
          value: 1,
          label: "已发货",
        },
        {
          value: 2,
          label: "已签收",
        },
        {
          value: 3,
          label: "已退货",
        },
      ],
      options: [
        {
          value: -1,
          label: "代发货",
        },
        {
          value: 1,
          label: "已发货",
        },
        {
          value: 2,
          label: "已签收",
        },
        {
          value: 3,
          label: "已退货",
        },
      ],

      bannerTitle: "",
      isShowdetails: false,
      consignee: null,
      phone: null,
      ordernum: null,
      status: null,
      pay: null,
      age: null,
      province: "",
      city: "",
      area: "",
      count: 10,
      page: 1,
      total: 0,
      getorderlist: [],
      // isShowPushOrder: false,
      userdetails: {},
      // 订单状态
      options: [
        {
          value: 0,
          label: "待发货",
        },
        {
          value: 1,
          label: "已发货",
        },
        {
          value: 2,
          label: "已签收",
        },
        {
          value: 3,
          label: "已退货",
        },
      ],
      ageTime: [
        {
          value: 0,
          label: "0月-6月",
        },
        {
          value: 1,
          label: "6月-12月",
        },
        {
          value: 2,
          label: "12月-36月",
        },
        {
          value: 3,
          label: "36个月以上",
        },
      ],
      inputnname: "",
      orderFrom: {
        logisticsno: "",
        orderLOgistcsType: "",
        state: 0,
        remarks: "",
        id: null, // 订单id
      },
      pay: null,
      age: null,
      starttime: null,
      endtime: null,
    };
  },
  created() {
    this.$vuex.state.bookList.map((item) => {
      if (item.name != this.$route.query.name) {
        this.$vuex.state.bookList.push(this.$route.query);
        console.log(22222);
      }
    });
    this.mygetorderlist();
    this.bannerTitle = this.$route.query.name;
    console.log(this.$route.query);
  },
  mounted() {},
 
  methods: {
    chongzhi() {
      this.consignee = null;
      this.phone = null;
      this.ordernum = null;
      this.status = null;
      this.pay = null;
      this.age = null;
      this.starttime = null;
      this.endtime = null;
      this.count = 10;
      this.page = 1;
    },
    query() {
      this.count = 10;
      this.page = 1;
      this.mygetorderlist();
      this.$message.success("查询成功");
    },
    payChange(status) {
      this.pay = status;
      // this.mygetorderlist()
    },
    statusChange(status) {
      this.status = status;
    },
    editSubmint() {
      modifyorderFun(
        this.userdetails.orderNumber,
        this.userdetails.orderLOgistcsType,
        this.userdetails.orderStatus,
        null,
        this.userdetails.orderId
      ).then((res) => {
        // console.log(res);
        if (res.code !== "0000") return this.$message.error(res.msg);
        this.$message.success(res.msg);
        this.isShowdetails = false;
        this.mygetorderlist();
      });
    },
    optionsChange(status) {
      // console.log(status);
      this.userdetails.orderStatus = status;
    },
    // select
    selectInput(value) {
      // console.log(value)
      this.orderFrom.state = value;
    },

    // 过滤
    myfilter(option) {
      var add;
      switch (option) {
        case 0:
          add = "待发货";
          break;
        case 1:
          add = "已发货";
          break;
        case 2:
          add = "已签收";
          break;
        case 3:
          add = "已退货";
        default:
      }
      return add;
    },
    // 订单详情
    details(id) {
      orderdetailsFun(id).then((res) => {
        this.userdetails = res.data;
        this.isShowdetails = true;
      });
    },
    mygetorderlist() {
      getorderlist(
        this.consignee,
        this.phone,
        this.ordernum,
        this.status,
        this.pay,
        this.age,
        this.starttime,
        this.endtime,
        this.count,
        this.page
      ).then((res) => {
        // console.log(res);
        if (res.code !== "0000") return this.$message.error(res.msg);
        this.getorderlist = res.data.data;
        console.log(res);
        this.total = res.data.total;
      });
    },
    handleSizeChange(val) {
      // console.log(val,'大小');
      this.count = val;
      this.mygetorderlist();
    },
    handleCurrentChange(val) {
      // console.log(val);
      this.page = val;
      this.mygetorderlist();
    },
  },
  components: { Card, ButtonCn, AlertCn },
};
</script>

<style lang="scss" scoped>

@import "../../components/style/init_el_checkout.scss";

.search_box {
  width: 100%;

  height: 100%;
}

.edit {
  color: #e04e2f;
  cursor: pointer;
}

.inpu_box {
  width: 60%;
  /* margin-left: 30px; */
  display: inline-block;
  /* margin-top: 30px; */
}

.conner {
  // width: 20%;
  // margin-left: 68px;
  display: inline-block;
  margin-top: 30px;
  margin-right: 50px;
  box-sizing: border-box;
  &.as {
    margin-right: 0;
  }
  &.picker {
    margin-top: 30px;
    margin-right: 0;
    width: 50%;
  }
}

::v-deep .el-input__inner {
  border-radius: 50px;
}

.Mybutton {
  // position: absolute;
  // right: 5%;
  // top: 47%;
  float: right;
  margin-top: 30px;
  margin-right: 30px;
}

.itemList {
  width: 95%;
  height: 100px;
  margin: 0 auto;
  line-height: 100px;
  box-sizing: border-box;
  box-sizing: border-box;
}
::v-deep .el-table .el-table__cell.is-center {
  text-align: center;
  font-size: 12px;
}
::v-deep .el-date-editor.el-input {
  width: 180px;
}

</style>
